<template>
  <div class="track_the_playback">
    <div class="aroundtop">
      <!-- 设置日期 -->
      <i class="el-icon-speed" title="时间">时间</i>
      <el-date-picker
        style="width: 180px; margin-right: 15px"
        v-model="select.workDay"
        type="date"
        placeholder="选择日"
        ref="historytime"
        @change="dataSearch"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
      ></el-date-picker>
      <!-- 设置查询类型 -->
      <el-select
        style="width: 120px; margin-right: 15px"
        v-model="select.typeValue"
        placeholder="请选择"
        @change="changeTypeValue"
      >
        <el-option
          v-for="item in select.typeList"
          :key="item.TYPE"
          :value="item.TYPE"
          :label="item.NAME"
        >
        </el-option>
      </el-select>
      <!-- 设置车辆 -->
      <el-select
        style="width: 180px; margin-right: 15px"
        v-if="select.typeValue === '1'"
        v-model="select.typeSubValue"
        @change="dataSearch"
        placeholder="请选择车辆"
        filterable
        clearable
      >
        <el-option
          v-for="item in select.vehicleList"
          :key="item.VID"
          :value="item.LICENSE_PLATE"
          :label="item.LICENSE_PLATE"
        >
        </el-option>
      </el-select>
      <!-- 设置司机 -->
      <el-select
        style="width: 180px; margin-right: 15px"
        v-if="select.typeValue === '2'"
        v-model="select.typeSubValue"
        @change="dataSearch"
        placeholder="请选择司机"
        filterable
        clearable
      >
        <el-option
          v-for="item in select.driverList"
          :key="item.NAME"
          :value="item.NAME"
          :label="item.NAME"
        >
        </el-option>
      </el-select>
      <!-- 设置作业类型 -->
      <el-select
        style="width: 180px; margin-right: 15px"
        v-if="select.typeValue === '3'"
        v-model="select.typeSubValue"
        @change="dataSearch"
        placeholder="请选择作业类型"
        filterable
        clearable
      >
        <el-option
          v-for="item in select.workTypeList"
          :key="item.WORKTYPE"
          :value="item.WORKTYPE"
          :label="item.WORKTYPE"
        >
        </el-option>
      </el-select>
      <!-- 设置道路 -->
      <i class="el-icon-speed">规划路线：</i>
      <el-select
        v-model="select.lineID"
        placeholder="请选择路线"
        filterable
        clearable
      >
        <el-option
          v-for="(item, index) in select.LineList"
          :key="item.LINEID"
          :value="item.LINEID"
          :label="item.LINENAME"
          @click.native="changeLine(index, item)"
        ></el-option>
      </el-select>
      <span class="buttonI" @click="start">查询</span>
      <div>
        <span style="margin-left: 5px">
          <el-switch
            class="el-checkbox-show"
            v-model="showjschecked"
            @change="changePointA"
            active-color="#13ce66"
          ></el-switch>
          <i class="el-icon-speed" title="加水点" style="margin-left: 10px"
            >加水点</i
          ></span
        >
        <span style="margin-left: 5px">
          <el-switch
            class="el-checkbox-show"
            v-model="showpwchecked"
            @change="changePointP"
            active-color="#13ce66"
          ></el-switch>
          <i class="el-icon-speed" title="排污点" style="margin-left: 10px"
            >排污点</i
          ></span
        >
        <i
          class="el-icon-speed"
          style="margin-left: 10px"
          v-if="formStatistics.show"
          >实际作业长度：{{ formStatistics.RealLength }}</i
        >
        <i
          class="el-icon-speed"
          style="margin-left: 10px"
          v-if="formStatistics.show"
          >实际作业时间：{{ formStatistics.RealTime }}</i
        >
        <i
          class="el-icon-speed"
          style="margin-left: 10px"
          v-if="formStatistics.show"
          >计划作业长度：{{ formStatistics.PlanLength }}</i
        >
      </div>
    </div>

    <!-- 地图 -->
    <div class="container" style="padding: 0px">
      <div id="map"></div>
      <div class="work-type-wrap">
        <el-button plain @click="setDistance"> 测 距 </el-button>
        <el-checkbox
          @change="changeRoadName"
          v-model="checkedRoadName"
          label="显示路名"
          border
          style="
            background: white;
            display: inline-block;
            margin-left: 10px;
            margin-right: 0px;
            height: 42px;
            padding: 11px 20px 10px 10px;
          "
        ></el-checkbox>
      </div>
      <div class="sliderHistory" v-if="setSlider.show">
        <el-slider
          v-model="setSlider.value"
          :step="setSlider.step"
          :max="setSlider.max"
          :format-tooltip="formatTooltipSlider"
          @input="inputSlider"
        ></el-slider>
      </div>
    </div>
    <!-- 图例 -->
    <div class="legend" v-if="showLegend">
      <h3>
        图例
        <i class="iconfont icon-shanchu" @click="showLegend = false"></i>
      </h3>
      <p>
        <span>
          <img :src="legend.routeXICHEN" alt />
        </span>
        <span style="font-size: 12px">规划轨迹</span>
      </p>
      <p>
        <span>
          <img :src="legend.routeXILU" alt />
        </span>
        <span style="font-size: 12px">作业历史轨迹</span>
      </p>
      <p>
        <span>
          <img :src="legend.routeXIAOXING" alt />
        </span>
        <span style="font-size: 12px">未作业历史轨迹</span>
      </p>
      <p>
        <span>
          <img
            style="width: 34px; height: 34px; padding: 3px"
            :src="legend.s1"
            alt
          />
        </span>
        <span style="font-size: 12px">规划起点</span>
      </p>
      <p>
        <span>
          <img
            style="width: 34px; height: 34px; padding: 3px"
            :src="legend.e1"
            alt
          />
        </span>
        <span style="font-size: 12px">规划终点</span>
      </p>
      <p>
        <span>
          <img
            style="width: 34px; height: 34px; padding: 3px"
            :src="legend.s2"
            alt
          />
        </span>
        <span style="font-size: 12px">历史轨迹起点</span>
      </p>
      <p>
        <span>
          <img
            style="width: 34px; height: 34px; padding: 3px"
            :src="legend.e2"
            alt
          />
        </span>
        <span style="font-size: 12px">历史轨迹终点</span>
      </p>
    </div>
    <!-- 右下角 图例展开按钮-->
    <div
      class="mini_legend right"
      v-if="!showLegend"
      @click="showLegend = !showLegend"
    >
      图例
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/common/js/date.js";
import ImageStart1 from "@/assets/img/playback/STplan.png";
import ImageEnd1 from "@/assets/img/playback/ENDplan.png";
import ImageStart from "@/assets/img/playback/STreal.png";
import ImageEnd from "@/assets/img/playback/ENDreal.png";
import "@/assets/css/common.css";
import MapStr from "@/main.js";
import DirectionImg from "@/assets/img/playback/direction.png";
import imgMarkerWater from '@/assets/img/marker/加水点.png'
import imgMarkerPollution from '@/assets/img/marker/排污水点.png'
import html2canvas from "html2canvas";
import export2Excel from "@/utils/exportExcel/index.js";

import imgrouteXIAOXING from "@/assets/img/MapMarker/vehicleRoute/xxRoute.png";
import imgrouteXICHEN from "@/assets/img/MapMarker/vehicleRoute/xcRoute.png";
import imgrouteXILU from "@/assets/img/MapMarker/vehicleRoute/gyRoute.png";

export default {
  data () {
    return {
      checkedRoadName: false,
      arrayRoadNameLabel: [],
      map: null,
      mapZoom: 20,
      distance: 20,

      showLegend: true,
      legend: {
        s1: ImageStart1,
        e1: ImageEnd1,
        s2: ImageStart,
        e2: ImageEnd,

        routeXIAOXING: imgrouteXIAOXING,
        routeXICHEN: imgrouteXICHEN,
        routeXILU: imgrouteXILU,
      },

      showjschecked: false,
      showpwchecked: false,
      listJiashui: [],
      listPaiwu: [],
      formStatistics: {
        show: false,
      },
      formDesign: {
        index: -1,
      },
      formHistory: {
        data: [],
        dataPolyline: [],
        markerS: null,
        markerE: null,
        markerD: null,
      },
      setSlider: {
        show: false,
        max: 100,
        value: 0,
        step: 1
      },
      mapDesignLine: {
        markerS: null,
        markerE: null,
        markerCurrent: null,
        arrayDesign: [],
        arrayDesignPoint: [],
        numTurn: 0,
      },
      select: {
        vehicleList: [],
        driverList: [],
        workTypeList: [],
        vehicleValue: '',
        driverValue: '',
        workTypeValue: '',

        typeSubList: [],
        typeSubValue: '',
        typeList: [{ TYPE: "1", NAME: "车辆" }, { TYPE: "2", NAME: "司机" }, { TYPE: "3", NAME: "作业类型" }],
        typeValue: '1',

        workDay: '',
        LineList: [],
      },
    };
  },
  mounted () {
    this.select.workDay = formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd')
    // 显示地图
    this.mapShow();
    this.getPointFacility()
    this.getVehicleInfo();
    this.getDriverInfo();
    this.getWorkTypeInfo();
  },
  methods: {
    start () {
      this.map.clearOverlays()
      this.setSlider.show = false
      this.formHistory.markerD.hide()
      this.getRoudDesignGPS()
      this.getHistory()
      this.getPlanRealData()
      this.getRoudAllGPS()
      this.mapDesignLine.numTurn = 0
    },
    // 编辑经纬度信息
    async getRoudAllGPS () {
      this.map.clearOverlays()
      var url = "Vehicle/GetLineRoadGPSInfoDesign?LID=" + this.formDesign.LINEID
      const { data } = await this.$Http.get(url)
      var itemInfo = data[0]

      var points = []
      // var pointAll = []

      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        if (element.ROUDID === itemInfo.ROUDID && element.NAME === itemInfo.NAME) {
          points.push(new BMap.Point(element.LNG, element.LAT))
          // pointAll.push(new BMap.Point(element.LNG, element.LAT))
        } else {
          this.drawRoad(itemInfo, points)
          itemInfo = element

          points = []
          points.push(new BMap.Point(element.LNG, element.LAT))
        }
      }
      this.drawRoad(itemInfo, points)
      // this.map.setViewport(pointAll);
    },
    drawRoad (itemInfo, points) {
      // 道路画线
      var lineCenter = new BMap.Bounds(points[0], points[points.length - 1]).getCenter()
      var label = new BMap.Label(itemInfo.NAME, { position: lineCenter, offset: new BMap.Size(-20, -10) })
      label.setStyle({
        borderColor: '#fff',
        padding: '2px',
        borderRadius: '5px', // 可能内存成本很高
      })
      this.map.addOverlay(label);
      // label.nameR = itemInfo.NAME
      // label.idR = itemInfo.ROUDID
      this.arrayRoadNameLabel.push(label)
      if (!this.checkedRoadName) {
        label.hide()
      }
    },
    async getHistory () {
      var url = 'Vehicle/GetVehicleHistoryInfo?VID=' + this.formDesign.VID + '&StartDate=' + this.select.workDay + '+' + this.formDesign.ONWORKTIME + '&EndDate=' + this.select.workDay + '+' + this.formDesign.OFFWORKTIME
      // {"LINEID":"182","LINENAME":"洗扫华明三级3早班","ONWORKTIME":"08:00:00","OFFWORKTIME":"10:00:00","VID":"15103","LICENSE_PLATE":"华明小机扫1号","DID":"33","NAME":"韩立虎"}
      // var url = 'Vehicle/GetVehicleHistoryInfo?VID=16474&StartDate=2024-07-22+00:00:00&EndDate=2024-07-23+00:00:00'
      const { data } = await this.$Http.get(url)
      if (data.length === 0) {
        var strMessage = '【' + this.formDesign.LICENSE_PLATE + '】在' + this.select.workDay + ' ' + this.formDesign.ONWORKTIME + ' 至 ' + this.formDesign.OFFWORKTIME + ' 无作业轨迹'
        this.$alert(strMessage, {
          confirmButtonText: '确定',
          // callback: action => {
          // }
        });
      } else {
        this.formHistory.data = data
        this.setSlider.max = data.length
        this.setSlider.show = true
        this.formHistory.markerD.show()
        this.formHistory.markerD.setPosition(new BMap.Point(0, 0))
        this.drawHistory()
      }

    },
    // 画轨迹 - 历史轨迹
    drawHistory () {
      const _this = this
      var pointArr = [];
      var boundPoints = [];
      var lastLock = 0
      for (var i = 0; i < this.formHistory.data.length; i++) {

        var item = this.formHistory.data[i]

        item.GPSTIME = item.GPSTIME.replace('T', ' ')

        pointArr.push(new BMap.Point(item.LNG, item.LAT))
        boundPoints.push(new BMap.Point(item.LNG, item.LAT))
        if (i != 0) {
          if (item.LOCK != lastLock) {
            drawLine(pointArr, lastLock)
            pointArr = []
          }
        }
        lastLock = item.LOCK
      }
      if (pointArr.length) {
        drawLine(pointArr, lastLock)
      }
      function drawLine (points, lastLock) {
        var color = '#FF00FF'
        if (lastLock == 0) {
          color = 'black'
        }
        var polylineH = new BMap.Polyline(points, {
          strokeColor: color,
          strokeWeight: 7,
          fillOpacity: 1,
        })
        _this.formHistory.dataPolyline.push(polylineH)
        _this.map.addOverlay(polylineH)
      }
      if (this.formHistory.data.length > 0) {
        this.formHistory.markerS = new BMap.Marker(new BMap.Point(this.formHistory.data[0].LNG, this.formHistory.data[0].LAT), { icon: new BMap.Icon(ImageStart, new BMap.Size(40, 34), { anchor: new BMap.Size(20, 34) }) })
        this.map.addOverlay(this.formHistory.markerS)
        this.formHistory.markerE = new BMap.Marker(new BMap.Point(this.formHistory.data[(this.formHistory.data.length - 1)].LNG, this.formHistory.data[(this.formHistory.data.length - 1)].LAT), { icon: new BMap.Icon(ImageEnd, new BMap.Size(40, 34), { anchor: new BMap.Size(20, 34) }) })
        this.map.addOverlay(this.formHistory.markerE)
      }

    },
    // 获取两个点的角度 - 历史轨迹
    getAngleHistory (lng1, lat1, lng2, lat2) {
      const a = (90 - lat2) * Math.PI / 180
      const b = (90 - lat1) * Math.PI / 180
      const AOC_BOC = (lng2 - lng1) * Math.PI / 180
      const cosc = Math.cos(a) * Math.cos(b) + Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC)
      const sinc = Math.sqrt(1 - cosc * cosc)
      const sinA = Math.sin(a) * Math.sin(AOC_BOC) / sinc
      const A = Math.asin(sinA) * 180 / Math.PI
      let res = 0
      if (lng2 > lng1 && lat2 > lat1) res = A
      else if (lng2 > lng1 && lat2 < lat1) res = 180 - A
      else if (lng2 < lng1 && lat2 < lat1) res = 180 - A
      else if (lng2 < lng1 && lat2 > lat1) res = 360 + A
      else if (lng2 > lng1 && lat2 === lat1) res = 90
      else if (lng2 < lng1 && lat2 === lat1) res = 270
      else if (lng2 === lng1 && lat2 > lat1) res = 0
      else if (lng2 === lng1 && lat2 < lat1) res = 180
      return res
    },
    closeHistory () {
      this.setSlider.show = false
      this.formHistory.markerD.hide()
      this.formHistory.dataPolyline.forEach(element => {
        this.map.removeOverlay(element)
      });
      this.map.removeOverlay(this.formHistory.markerS)
      this.map.removeOverlay(this.formHistory.markerE)
    },
    formatTooltipSlider (val) {
      if (val > 0) {
        return this.formHistory.data[val - 1].GPSTIME
      } 
    },
    inputSlider (val) {
      this.formHistory.markerD.show()
      // 设置标记点坐标位置
      var pointChangeSlider = new BMap.Point(this.formHistory.data[val].LNG, this.formHistory.data[val].LAT)
      this.formHistory.markerD.setPosition(pointChangeSlider)
      // 获取两个标记点的角度
      var k = 0
      if (val > 0) {
        k = this.getAngleHistory(this.formHistory.data[(val - 1)].LNG, this.formHistory.data[(val - 1)].LAT, this.formHistory.data[val].LNG, this.formHistory.data[val].LAT)
      }
      // 设置标记点方向
      this.formHistory.markerD.setRotation(k)
      // 如果点位在当前地图显示范围外，则将该点设置为地图中心
      if (!this.map.getBounds().containsPoint(pointChangeSlider)) {
        this.map.centerAndZoom(pointChangeSlider, this.mapZoom)
      }
    },
    async getPlanRealData () {
      var url = "Vehicle/GetPlanRealData?LID=" + this.formDesign.LINEID + '&WORKDATE=' + this.select.workDay
      const { data } = await this.$Http.get(url)
      this.formStatistics = data[0]
      this.formStatistics.RealLength = parseFloat(this.formStatistics.RealLength).toFixed(2)
      this.formStatistics.show = true
    },
    async getRoudDesignGPS () {
      var url = "Vehicle/GetRoadDesignInfo?LID=" + this.formDesign.LINEID
      const { data } = await this.$Http.get(url)
      // console.log(data)
      var itemInfo = data[0]
      var points = []
      var pointAll = []

      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        pointAll.push(new BMap.Point(element.LNG, element.LAT))
        if (element.ROUDID === itemInfo.ROUDID && element.DIRECTION === itemInfo.DIRECTION) {
          points.push(new BMap.Point(element.LNG, element.LAT))

        } else {
          this.drawRoadDesign(points[0], points[points.length - 1], points, itemInfo)

          itemInfo = element
          points = []
          points.push(new BMap.Point(element.LNG, element.LAT))
        }
      }
      this.map.setViewport(pointAll);
      this.drawRoadDesign(points[0], points[points.length - 1], points, itemInfo)
      this.mapDesignLine.markerS = new BMap.Marker(new BMap.Point(data[0].LNG, data[0].LAT), { icon: new BMap.Icon(ImageStart1, new BMap.Size(40, 34), { anchor: new BMap.Size(20, 34) }) })
      this.map.addOverlay(this.mapDesignLine.markerS)
      this.mapDesignLine.markerE = new BMap.Marker(new BMap.Point(data[(data.length - 1)].LNG, data[(data.length - 1)].LAT), { icon: new BMap.Icon(ImageEnd1, new BMap.Size(40, 34), { anchor: new BMap.Size(20, 34) }) })
      this.map.addOverlay(this.mapDesignLine.markerE)
      this.mapDesignLine.markerE.setOffset(new BMap.Size(5, 5))
    },
    drawRoadDesign (pointLest, point, pointArr, itemInfo) {
      // console.log(pointArr)
      var pointNewArr = []
      var changMax = null
      for (let Hg = 0; Hg < pointArr.length; Hg++) {

        // var label1 = new BMap.Label(Hg, { position: pointArr[Hg], offset: new BMap.Size(-10, 50) })
        // this.map.addOverlay(label1);

        // var changMax = this.dataList[i][0].changeMax;
        //第一个点
        if (Hg == 0) {
          pointNewArr.push(
            this.getCorrentVehicleInfoThree(
              pointArr[Hg],
              pointArr[Hg],
              pointArr[Hg + 1],
              pointArr,
              // point,
              // changMax
            )
          );
        }
        //最后一个点
        else if (Hg == pointArr.length - 1) {
          pointNewArr.push(
            this.getCorrentVehicleInfoThree(
              pointArr[Hg - 1],
              pointArr[Hg],
              pointArr[Hg],
              pointArr,
              // point,
              // changMax
            )
          );
        } else {
          pointNewArr.push(
            this.getCorrentVehicleInfoThree(
              pointArr[Hg - 1],
              pointArr[Hg],
              pointArr[Hg + 1],
              pointArr,
              // point,
              // changMax
            )
          );
        }
      }


      // console.log(pointNewArr)
      var sy = new BMap.Symbol('M162.736806 420.207741 69.106115 513.838433C55.316568 527.627981 32.959294 527.627981 19.169747 513.838433 5.380199 500.048885 5.380199 477.691611 19.169747 463.902065L112.800438 370.271373 462.459671 20.61214C475.955728 7.116083 493.590221 0.253295 511.296501 0.006868 530.22565-0.043027 548.344615 6.833653 562.123102 20.61214L911.782335 370.271373 1005.413026 463.902065C1019.202572 477.691611 1019.202572 500.048885 1005.413026 513.838433 991.623479 527.627981 969.266204 527.627981 955.476657 513.838433L861.845967 420.207741C861.845967 420.207741 635.791367 194.142291 547.310345 105.556891L547.310345 988.689655C547.310345 1008.19102 531.501365 1024 512 1024 492.498635 1024 476.689655 1008.19102 476.689655 988.689655L476.689655 106.254893 162.736806 420.207741Z', {
        scale: 0.01,//图标缩放大小
        // fillColor: 'yellow',//设置矢量图标的线填充颜色
        // fillOpacity: 1, //图标填充透明度
        strokeColor: 'yellow',//设置矢量图标的线填充颜色
        strokeWeight: '2',//设置线宽
        // rotation : '90deg', //图标旋转角度
        // anchor:new BMap.Size(100, 0)
      });
      sy.setAnchor(new BMap.Size(520, 0));
      var icons = new BMap.IconSequence(sy, '10', '100');
      var polyline = new BMap.Polyline(pointNewArr
        , {
          enableEditing: false,//是否启用线编辑，默认为false
          enableClicking: false,//是否响应点击事件，默认为true
          icons: [icons],
          strokeWeight: '10',//折线的宽度，以像素为单位
          strokeOpacity: 0.5,//折线的透明度，取值范围0 - 1
          strokeColor: 'blue' //折线颜色
          // }
          // , { strokeColor: 'blue', strokeWeight: 4, strokeOpacity: 0.5
        });   //创建折线
      this.map.addOverlay(polyline);   //增加折线

      // if (itemInfo.Rname != '') {
      //   var lineCenter = polyline.getBounds().getCenter()
      //   var label = new BMap.Label(itemInfo.Rname, { position: lineCenter, offset: new BMap.Size(-20, -10) })
      //   label.setStyle({
      //     borderColor: '#fff',
      //     padding: '2px',
      //     borderRadius: '5px', // 可能内存成本很高
      //   })
      //   this.map.addOverlay(label);
      //   this.arrayRoadNameLabel.push(label)
      //   if (!this.checkedRoadName) {
      //     label.hide()
      //   }
      // }
      if (itemInfo === null) {
        itemInfo = { 'ROUDID': '', 'Polyline': polyline, 'arrPoint': polyline.getPath() }
        //   // this.mapDesignLine.arrayDesign.push({ 'ROUDID': '', 'LNG': pointLest.lng, 'LAT': pointLest.lat, 'Polyline': polyline })
        //   this.mapDesignLine.arrayDesign.push(itemInfo)
      } else {
        //   itemInfo.Polyline = polyline
        itemInfo.arrPoint = polyline.getPath()
        this.mapDesignLine.arrayDesign.push(itemInfo)
      }
      var angle2 = this.getAngle(polyline.getPath()[0], polyline.getPath()[1])
      itemInfo.angle = angle2
      if (this.mapDesignLine.arrayDesign.length > 1) {

        var arrPointDL = this.mapDesignLine.arrayDesign[this.mapDesignLine.arrayDesign.length - 2].arrPoint
        // var angle1 = this.getAngle(arrPointDL[arrPointDL.length - 2], arrPointDL[arrPointDL.length - 1])
        var angle1 = this.mapDesignLine.arrayDesign[this.mapDesignLine.arrayDesign.length - 2].angle
        // var angle2 = this.getAngle(polyline.getPath()[0], polyline.getPath()[1])
        // console.log(angle1, angle2)
        var angleDValue = angle1 - angle2;
        console.log(angleDValue)
        var absoluteValue = Math.abs(angleDValue);
        var strTurn = ''
        if ((angleDValue > -330 && angleDValue < -210) || (angleDValue > 30 && angleDValue < 150)) {
          strTurn = '左转'
        }
        if ((angleDValue > 210 && angleDValue < 330) || (angleDValue > -150 && angleDValue < -30)) {
          strTurn = '右转'
        }
        if ((angleDValue > -185 && angleDValue < -175) || (angleDValue > 175 && angleDValue < 185) || (angleDValue > 355)) {
          strTurn = '调头'
        }
        // if ((angleDValue > -330 && angleDValue < -210) || (angleDValue > 30 && angleDValue < 150)) {
        //   strTurn = '左转'
        // }
        // if ((angleDValue > 210 && angleDValue < 330) || (angleDValue > -150 && angleDValue < -30)) {
        //   strTurn = '右转'
        // }
        // if ((angleDValue > 70 && angleDValue < 110) || (angleDValue > -200 && angleDValue < -160) || (angleDValue > 160 && angleDValue < 200) || (angleDValue > 340)) {
        //   strTurn = '调头'
        // }

        if (strTurn != '') {
          this.mapDesignLine.numTurn++;
          var pointCenter = new BMap.Bounds(arrPointDL[arrPointDL.length - 2], arrPointDL[arrPointDL.length - 1]).getCenter()
          var opts = {
            position: pointCenter, // 指定文本标注所在的地理位置
            offset: this.getOffsetSize(angle1) // 设置文本偏移量
          };
          // 创建文本标注对象
          var strlabel = this.mapDesignLine.numTurn + ', ' + strTurn
          console.log(strlabel)
          var label = new BMap.Label(strlabel, opts)
          itemInfo.turnLabel = label
          // label.setStyle({
          //   borderColor: '#fff',
          //   padding: '2px',
          //   borderRadius: '5px', // 可能内存成本很高
          // })
          this.map.addOverlay(label);

        }
      }
    },
    getCorrentVehicleInfoThree (
      info1,
      info2,
      info3,
      points,
      // infoEE,
      // changeMax
    ) {

      var infoSS = points[0]
      var infoEE = points[points.length - 1]
      // console.log(infoSS, infoEE, points)
      //两点之间的弧度
      var offAngel = 0;
      var info = new Object();
      var xiangxian = "";
      //两点经度差

      var offXX = info3.lng * 1 - info1.lng * 1;
      //两点纬度差
      var offYY = info3.lat * 1 - info1.lat * 1;
      //经度偏移
      var offLng = 0;

      //纬度偏移
      var offLat = 0;

      //偏移系数X
      var facX = 0;

      //偏移系数Y
      var facY = 0;

      if (info3.lng != info1.lng) {
        offAngel = Math.atan2(Math.abs(offXX), Math.abs(offYY));
      }

      var offX = infoEE.lng * 1 - infoSS.lng * 1;
      //两点纬度差
      var offY = infoEE.lat * 1 - infoSS.lat * 1;

      //第一象限
      if (offX > 0 && offY > 0) {
        xiangxian = "一象限";
        facX = -1;
        facY = 1;
      }
      //第二象限
      else if (offX < 0 && offY > 0) {
        xiangxian = "二象限";
        facX = -1;
        facY = -1;
      }
      //第三象限
      else if (offX < 0 && offY < 0) {
        xiangxian = "三象限";
        facX = 1;
        facY = -1;
      }
      //第四象限
      else if (offX > 0 && offY < 0) {
        xiangxian = "四象限";
        facX = 1;
        facY = 1;
      } else if (offX == 0 && offY > 0) {
        xiangxian = "一象限";
        facX = -1;
        facY = 0;
      } else if (offX < 0 && offY == 0) {
        xiangxian = "二象限";

        facX = 0;
        facY = -1;
      } else if (offX == 0 && offY < 0) {
        xiangxian = "三象限";
        facX = 1;
        facY = 0;
      } else if (offX > 0 && offY == 0) {
        xiangxian = "四象限";
        facX = 0;
        facY = 1;
      }

      // switch (changeMax) {
      //   case "X+":
      //     facY = -1;
      //     break;

      //   case "X-":
      //     facY = 1;
      //     break;

      //   case "X0":
      //     facY = -1;
      //     break;

      //   case "Y+":
      //     facX = 1;
      //     break;

      //   case "Y-":
      //     facX = -1;
      //     break;

      //   case "Y0":
      //     facX = 1;
      //     break;
      // }



      facX = -1.0 * facX;
      facY = -1.0 * facY;

      //计算偏移
      var offSet = this.distance * 0.00001;
      offLng = offSet * Math.cos(offAngel);
      offLat = offSet * Math.sin(offAngel);

      var lng = info2.lng * 1 + facX * offLng;
      var lat = info2.lat * 1 + facY * offLat;

      return new BMap.Point(lng, lat);
    },
    getAngle (point_a, point_b) {
      var lng_a = point_a.lng, lat_a = point_a.lat, lng_b = point_b.lng, lat_b = point_b.lat;

      var a = (90 - lat_b) * Math.PI / 180;
      var b = (90 - lat_a) * Math.PI / 180;
      var AOC_BOC = (lng_b - lng_a) * Math.PI / 180;
      var cosc = Math.cos(a) * Math.cos(b) + Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC);
      var sinc = Math.sqrt(1 - cosc * cosc);
      var sinA = Math.sin(a) * Math.sin(AOC_BOC) / sinc;
      var A = Math.asin(sinA) * 180 / Math.PI;
      var res = 0;
      if (lng_b > lng_a && lat_b > lat_a) res = A;
      else if (lng_b > lng_a && lat_b < lat_a) res = 180 - A;
      else if (lng_b < lng_a && lat_b < lat_a) res = 180 - A;
      else if (lng_b < lng_a && lat_b > lat_a) res = 360 + A;
      else if (lng_b > lng_a && lat_b == lat_a) res = 90;
      else if (lng_b < lng_a && lat_b == lat_a) res = 270;
      else if (lng_b == lng_a && lat_b > lat_a) res = 0;
      else if (lng_b == lng_a && lat_b < lat_a) res = 180;
      return res;
    },
    getOffsetSize (angle) {
      //偏移系数X
      var facX = 0;
      //偏移系数Y
      var facY = 0;
      if (angle > 270) {
        angle = angle - 270
        facX = -1
        facY = -1
      } else if (angle > 180) {
        angle = angle - 180
        facX = -1
        facY = +1
      } else if (angle > 90) {
        angle = angle - 90
        facX = +1
        facY = +1
      } else {
        facX = +1
        facY = -1
      }

      var length = 10;
      // 将角度转换为弧度
      var radian = ((2 * Math.PI) / 360) * angle;
      // 计算对边长度（‌假设已知的是角度和斜边）‌
      var opposite_side = Math.sin(radian) * length;

      // 计算邻边长度（‌假设邻边是最短的那条边）‌
      var adjacent_side = Math.cos(radian) * length;
      //  AC=AB*Cos∠A=c*Cosa ， BC=AB*Sin∠A=c*Sina 。
      if (facX === facY) {
        return new BMap.Size(adjacent_side.toFixed(2) * facX, opposite_side.toFixed(2) * facY);
      } else {
        return new BMap.Size(opposite_side.toFixed(2) * facX, adjacent_side.toFixed(2) * facY);
      }
    },
    async getVehicleInfo () {
      var url = 'Vehicle/GetVehicleInfoPB?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.select.vehicleList = data
    },
    async getDriverInfo () {
      var url = 'Vehicle/GetDriverInfoPB?NAME=&ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.select.driverList = data
    },
    async getWorkTypeInfo () {
      var url = 'Vehicle/GetWorkTypeInfoPB'
      const { data } = await this.$Http.get(url)
      this.select.workTypeList = data
    },
    async getLineInfoDesign () {
      //  GetRoadPlanInfoByName(string ClientNO, string WORKDATE, string NAME, string TYPE)

      const { data } = await this.$Http.get(url)

      // var arr = []
      // data.forEach(element => {
      //   if (element.ISPLAN === '1') {
      //     arr.push(element)
      //   }
      // });
      // this.select.LineList = arr
    },
    async dataSearch () {
      var url = 'Vehicle/GetRoadPlanInfoByName?ClientNO=' + localStorage.getItem('CLIENT_NO') + '&WORKDATE=' + this.select.workDay + '&TYPE=' + this.select.typeValue + '&NAME=' + this.select.typeSubValue
      const { data } = await this.$Http.get(url)
      this.select.LineList = data
    },
    changeTypeValue () {
      // { "TYPE": "作业类型" }, { "TYPE": "司机" }, { "TYPE": "车辆" }],
      switch (this.select.typeValue) {
        case "作业类型":
          this.select.typeSubList = this.select.workTypeList;
          break;
        case "司机":
          this.select.typeSubList = this.select.driverList;
          break;

        default:
          this.select.typeSubList = this.select.vehicleList;
          break;
      }
      this.select.typeSubValue = ''

    },
    changeLine (index, item) {
      this.formDesign = item
      this.formDesign.index = index
    },

    async getPointFacility () {
      var url = '/CarService/getPlaceWaterInfo?CLIENT_NO=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      // data.push({ "NAME": "西区加水点1", "LONGITUDE": "117.279008", "LATITUDE": "39.073569", "TYPE": "A" })
      // data.push({ "NAME": "西区排污点1", "LONGITUDE": "117.479008", "LATITUDE": "39.073569", "TYPE": "P" })
      // data.push({ "NAME": "西区排污点2", "LONGITUDE": "117.579008", "LATITUDE": "39.073569", "TYPE": "P" })

      var iconA = new BMap.Icon(imgMarkerWater, new BMap.Size(50, 50));
      var iconP = new BMap.Icon(imgMarkerPollution, new BMap.Size(50, 50));

      data.forEach(item => {
        var marker = null;
        switch (item.TYPE) {
          case 'A':
            item.TYPE_NAME = '加水点'
            marker = new BMap.Marker(new BMap.Point(item.LONGITUDE, item.LATITUDE), { icon: iconA });

            this.listJiashui.push(marker);
            break;
          case 'P':
            item.TYPE_NAME = '排污点'
            marker = new BMap.Marker(new BMap.Point(item.LONGITUDE, item.LATITUDE), { icon: iconP });
            this.listPaiwu.push(marker);
            break;
        }
        marker.hide()
        var label = new BMap.Label(item.NAME, { offset: new BMap.Size(-10, 50) })
        marker.setLabel(label)
        marker.disableMassClear()
        this.map.addOverlay(marker);
      });

    },
    changePointA () {
      console.log(this.showjschecked)
      this.listJiashui.forEach(element => {
        if (this.showjschecked) {
          element.show()
        } else {
          element.hide()
        }
      });
    },
    changePointP () {
      console.log(this.showpwchecked)
      this.listPaiwu.forEach(element => {
        if (this.showpwchecked) {
          element.show()
        } else {
          element.hide()
        }
      });
    },
    // 显示地图
    mapShow () {
      // 百度地图API功能
      this.map = new BMap.Map("map"); // 创建Map实例
      this.map.centerAndZoom(
        new BMap.Point(MapStr.DefaultPointX, MapStr.DefaultPointY),
        this.mapZoom
      ); // 初始化地图,设置中心点坐标和地图级别
      this.map.setCurrentCity(MapStr.MapName); // 设置地图显示的城市 此项是必须设置的
      // 开启滚轮缩放
      this.map.enableScrollWheelZoom(true);

      var marker1 = new BMap.Marker(new BMap.Point(0, 0), { icon: new BMap.Icon(DirectionImg, new BMap.Size(20, 26)) })
      marker1.disableMassClear()
      // marker1.hide()
      this.map.addOverlay(marker1)
      this.formHistory.markerD = marker1
      // var myIcon = new BMap.Icon(DirectionImg, new BMap.Size(32, 32), {
      //   anchor: new BMap.Size(20, 20),
      // });
      // this.markerWithSlider = new BMap.Marker(new BMap.Point(0, 0), {
      //   icon: myIcon,
      // });
      // this.markerWithSlider.disableMassClear();
      // this.map.addOverlay(this.markerWithSlider);
    },
    // 测距
    setDistance () {
      if (!this.mapCursor) {
        this.mapCursor = new BMapLib.DistanceTool(this.map)
      }
      if (this.mapCursor.isOpen) {
        // 结束测量
        this.mapCursor.close()
      } else {
        // 开始测量
        this.mapCursor.open()
      }
    },
    changeRoadName () {
      this.arrayRoadNameLabel.forEach(element => {
        if (this.checkedRoadName) {
          element.show()
        } else {
          element.hide()
        }
      });
    },
  },

};
</script>

<style scoped lang="less">
/deep/.BMap_cpyCtrl {
  display: none !important;
}
/deep/.anchorBL {
  display: none !important;
}
.sliderHistory {
  border-radius: 10px;
  background-color: #007acc;
  width: 300px;
  position: absolute;
  right: 2%;
  top: 180px;
  height: 50px;
  padding: 10px 30px 0px;
}
.track_the_playback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .aroundtop {
    padding: 10px;
    background-color: #007acc;
    height: 100%;
    border-radius: 5px;
    &:first-child {
      padding-left: 10px;
      height: auto;
      i {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        height: 30px;
        line-height: 28px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 15px;
      }
      .el-checkbox-show {
        background-color: #007acc;
        border-color: rgb(196, 105, 20);
      }
    }
    .aroundtopcontent {
      // margin-left: 2px;
      margin-top: 8px;
      background-color: #fff;
      border-radius: 5px;
      width: 100%;
      i {
        color: #007acc;
        font-size: 17px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-left: 15px;
      }

      .input-number {
        margin-top: 8px;
        margin-right: 15px;
        font-size: 14px;
        width: 100%;
        text-align: center;
      }
      .el-checkbox-show {
        background-color: rgb(255, 255, 255);
        border-color: rgb(196, 105, 20);
        margin-right: 8px;
      }
    }
  }
  .container {
    flex: 1;
    #map {
      height: 100%;
    }
  }
}
.el-icon-speed {
  margin-left: 5px;
}
.buttonI {
  border: 1px solid #fff;
  padding: 0px 8px;
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  height: 30px;
  line-height: 28px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  margin: 5px;
}
.work-type-wrap {
  position: absolute;
  right: 2%;
  top: 100px;
  height: 150px;
  .map-btn {
    width: 320px;

    padding: 10px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
  }
}
.legend {
  width: 550px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px 0 10px;
  border-radius: 5px;
  h3 {
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
    margin-bottom: 5px;
    i {
      float: right;
      cursor: pointer;
      &:before {
        color: #666;
      }
    }
  }
  p {
    // text-align: center;
    color: #333;
    float: left;
    width: 14%;
    margin-bottom: 20px;
    span {
      display: block;
      text-align: center;
      &:first-child {
        img {
          // background-size: 30px 30px;
          height: 40px;
        }
      }
    }
  }
}
.mini_legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background-color: #007acc;
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  &.right {
    right: 25px;
    bottom: 20px;
    left: auto;
  }
}
</style>
